import React from 'react';
import {Form as FormAntd} from 'antd';

import './index.scss';

/**
 * 表单项：对antd的Form.Item的扩展，支持直接在属性上配置校验组件
 * 参考：https://ant.design/components/form-cn/
 * 新增属性：
 * that：formChild所在的React组件。无法通过formChild获取时，需要传。类型：ReactNode。
 * formId：校验组件的id。类型：string。
 * formConfig：校验参数。类型：object。
 * formChild：原始的校验组件，需要使用getFieldDecorator包装。类型：ReactNode。
 * 注意：formChild所在的React组件需要先用FormAntd.create()包装，否则，无法正常校验
 */
class FormItem extends React.Component {
  //默认值
  static defaultProps = {
    className: ''
  };

  render() {
    let {className, children, formId, formConfig, formChild, ...other} = this.props;
    return (
      <FormAntd.Item className={`g-form-item ${className}`} {...other}>
        {this.renderFormChild()}
        {children}
      </FormAntd.Item>
    );
  }

  /**
   * 加载校验组件
   * 校验组件：使用this.props.form.getFieldDecorator()包装的组件
   */
  renderFormChild() {
    let {that, formId, formConfig, formChild} = this.props;
    if (!formChild) return;

    //声明formChild的React组件
    let stateNode = that || (formChild && formChild._owner && formChild._owner.stateNode);
    if (stateNode.props.form) {
      //使用getFieldDecorator绑定组件
      let {getFieldDecorator} = stateNode.props.form;
      return getFieldDecorator(formId, formConfig)(formChild);
    } else {
      return formChild;
    }
  }
}

/**
 * antd的表单：具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。
 * 参考：https://ant.design/components/form-cn/
 * 注意：
 * 1.使用this.props.form.resetFields()重置表单时，会以最新的initialValue重置。
 * 2.如果id使用嵌套结构，则得到的values会自动转化为嵌套结构
 */
export default class Form extends React.Component {
  //表单项
  static Item = FormItem;
  //用于创建表单
  static create = FormAntd.create;

  //默认值
  static defaultProps = {
    className: ''
  };

  render() {
    let {className, children, ...other} = this.props;
    return (
      <FormAntd className={`g-form ${className}`} {...other}>
        {children}
      </FormAntd>
    );
  }
}
